<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">
<title>购物结算</title>
<%@include file="../collect/meta.jsp"%>
<link rel="stylesheet" href="css/radius.css" type="text/css"></link>
<script type="text/javascript" src="${ctx}/js/returnTop.js"></script>
</head>
<body lang="zh-cn">
	<div class="wrapper">
		<c:import url="/muser/musertop.jsp"></c:import>
		<div class="main-container" id="main-container">
			<div class="main-container-inner">
				<c:import url="/muser/muserleft.jsp"></c:import>
				<div class="main-content">
					<div class="breadcrumbs" id="breadcrumbs">
						<ul class="breadcrumb">
							<li><i class="icon-home home-icon"></i>购物结算</li>
						</ul>
					</div>
					<div class="page-content">
						<div class="row">
							<div class="col-xs-12">
								<!-- PAGE CONTENT BEGINS -->
								<form action="member!seekMember" name="seekMember" method="post">
									<fieldset>
										<legend align="center"> 消费搜索 </legend>
										<div align="center">
											<input type="text" id="mobile" name="member.mobile"
												placeholder="手机号" maxlength="11" /> <input type="hidden"
												name="seekType" value="shopseek" /> <input type="button"
												class="btn btn-primary radius btn-sm" id="seek"
												value="搜&nbsp;索" />
											<%
												if (request.getParameter("error") != null) {
											%>
											&nbsp;&nbsp;&nbsp; <i style="color: red">该手机号还未注册会员</i>
											<%
												}
											%>
											<c:if test="${message==''}">
											</c:if>
											<c:if test="${message!=''}">
												<lable style="color: red">${message }</lable>
											</c:if>
										</div>
									</fieldset>
								</form>
								<br />
								<input type="hidden" id="temp" value="<%=request.getParameter("temp") %>">
								<%
									if (request.getParameter("temp") != null) {
								%>
								<form action="member!shopping" name="shopping" method="post">
									<fieldset>
										<legend align="center"> 会员信息 </legend>
										<div align="center">
											<table border="0" cellspacing="1" cellpadding="3">
												<tr>
													<td>
														<div align="right">手&nbsp;机&nbsp;号:</div></td>
													<td><input type="hidden"
														name="member.mobile" value="${member.mobile }"
														id="memberMobile" /> ${member.mobile }</td>
												</tr>
												<tr>
													<td>
														<div align="right">姓&nbsp;&nbsp;&nbsp;&nbsp;名:</div></td>
													<td><c:if test="${not empty member.name }">
			                                  			${member.name }
			                                  		</c:if></td>
												</tr>
												<tr>
													<td>
														<div align="right">性&nbsp;&nbsp;&nbsp;&nbsp;别:</div></td>
													<td><c:if test="${not empty member.sex }">
			                                  			${member.sex }
			                                  		</c:if></td>
												</tr>
												<tr>
													<td>
														<div align="right">注册时间:</div></td>
													<td>
														${fn:substring(member.createTime, 0,
														fn:indexOf(member.createTime, "."))}
													</td>
												</tr>
												<tr>
													<td>
														<div align="right">会员积分:</div></td>
													<td>
														<input type="hidden" id="score"
															name="baseMember.score" value="${baseMember.score}" />
														${fn:substring(baseMember.score, 0, fn:indexOf(baseMember.score, ".0"))}
													</td>
												</tr>
												<tr>
													<td>
														<div align="right">会员等级:</div></td>
													<td>${baseMember.level}</td>
												</tr>
												<tr>
													<td>
														<div align="right">消费金额:</div></td>
													<td><input type="text" id="money"
														name="money" style="width: 100px; height: 30px"
														maxlength="6" /></td>
												</tr>
												<tr class="small_banks">
													<td>
														<div align="right">小票号:</div></td>
													<td><input type="text" id="smallBanks"
														name="consume.smallBanks" style="width: 100px; height: 30px" /></td>
												</tr>
												<tr>
													<td>
														<div align="right" style="color: green">会员余额:</div></td>
													<td style="color: green">
														<input type="hidden" id="balance" name="baseMember.balance"
															value="${baseMember.balance}" />
														<fmt:formatNumber value="${baseMember.balance}" pattern="#0.00"/>

													</td>
												</tr>
												<!-- 验证码 -->
												<tr class="verify-code">
													<td>
														<div align="right" style="color: red">验证码:</div></td>
													<td>
														<input type="text" id="verifyCode" name="verifyCode" style="width: 100px; height: 30px" />
														<button type="button" id="sendBtn" class="btn btn-success radius btn-sm">发送验证码</button>
													</td>
												</tr>
												<tr>
													<td>
														<div align="right">
															<input type="button" class="btn btn-primary radius" id="but"
																value="确认交易" />
														</div></td>
													<td>
														<div align="left" class="yuezhifu">
															<input type="checkbox" id="cekbox" name="type" value="1" />
															使用余额支付${message}
														</div></td>

												</tr>
												<tr>
													<td colspan="2">
														<div align="center">
															<b id="backMessage" style="font-size: 25px; color: red;">交易成功!</b>
														</div> <input type="hidden" name="back" id="back"
														value="${back }" /></td>
												</tr>
												<input type="hidden" name="member.eaId" value="${member.eaId }" />
												<input type="hidden" name="member.id" value="${member.id }" />
												<input type="hidden" name="baseMember.id" value="${baseMember.id }" />
												<input type="hidden" name="shop.id" value="${shop.id }" />
											</table>

										</div>
										<legend align="center"> 消费记录 </legend>
										<table class="table table-striped table-bordered table-hover">
											<tr>
												<th>
													<div align="center">消费金额</div></th>
												<th>
													<div align="center">付款方式</div></th>
												<th>
													<div align="center">消费店铺</div></th>
												<th>
													<div align="center">操作人</div></th>
												<th>
													<div align="center">购物时间</div></th>
											</tr>
											<c:forEach items="${consumes}" var="consume"
												varStatus="status">
												<c:if test="${status.count<=10}">
													<tr>
														<td>
															<div align="center">${consume.money }</div></td>
														<td>
															<div align="center">
																<c:if test="${consume.type==0 }">现金</c:if>
																<c:if test="${consume.type==1 }">余额</c:if>
															</div></td>
														<td>
															<div align="center">${consume.shopName }</div></td>
														<td>
															<div align="center">${consume.userName}</div></td>
														<td>
															<div align="center">${consume.createTime }</div></td>
													</tr>
												</c:if>
											</c:forEach>
										</table>
									</fieldset>
								</form>
								<%
									}
								%>
							</div>
							<!-- /.col -->
						</div>
						<!-- /.row -->
					</div>
					<!-- /.page-content -->
				</div>
				<!-- /.main-content -->
			</div>
			<!-- /.main-container-inner -->
			<a href="#" id="btn-scroll-up"
				class="btn-scroll-up btn btn-sm btn-inverse"
				style="position: fixed; bottom: 0;"> <i
				class="icon-double-angle-up icon-only bigger-110"></i> </a>
		</div>
		<!-- /.main-container -->
		<div class="push"></div>
	</div>
	<c:import url="/collect/down.jsp"></c:import>

	<script type="text/javascript">
		$(document).ready(function() {
			$('.mshop > a').css("color","red");
			// 是否显示返回结果提示
			var back = $("#back").val();
			if (back == "" || back == null) {
					$("#backMessage").hide();
			} else {
				setTimeout("$('#backMessage').hide()", 5000);
			}
			
			$(".small_banks").hide();
			$(".verify-code").hide();
			var tempFlag = $("#temp").val();
			// 是否是杭州晓荷的操作员的标示
			var xiaoheFlag = false;
			// 验证是否是杭州晓荷的操作员
			// 如果是显示小票号
			if (tempFlag == 'shopping') {
				$.ajax({
					url : "logconsumeexamineaction!verifyLoginFromUser",
					type : "post",
					datatype : "json",
					success : function(data) {
						var d = jQuery.parseJSON(data);
						if (d.temp == 'yes') {
							$(".small_banks").show();
							xiaoheFlag = true;
						}else if (d.temp == 'no') {
							$(".small_banks").hide();
							xiaoheFlag = false;
						}
					},
					error : function(request) {
						alert("Connection error");
					}
				});
			}

			$("#seek").click(function() {
				var mobile = $("#mobile").val();
				if (mobile.length == 0) {
					alert("请填写手机号");
					return false;
				}
				if (!(/^1[3|5|8][0-9]\d{4,8}$/.test(mobile))
							|| mobile.length != 11) {
					alert("手机格式有误");
					return false;
				}
				seekMember.submit();
			});
					
			$("#but").click(function() {
				if (!confirm("确认交易？")) {
					return false;
				}

				var money = $("#money").val();

				//判断非负浮点小数
				var str = /^\d+(\.\d+)?$/;
				if (!str.test(money)) {
					alert("消费金额填写有误");
					return false;
				}
				
				// 异步验证前，将提交按钮置灰
				$("#but").attr('disabled',true);
				
				$.ajax({
					url : "member!timeOutShop",
					type : "post",
					data : {
						"memberMobile" : $("#memberMobile").val()
					},
					datatype : "json",
					success : function(data) {
						var d = $.parseJSON(data);
						var b = d.timeOut;
						if (b) {
							$("#but").attr('disabled',false);
							alert("不能在30秒内重复结算同一个账号！");
						}else {
							//是否是余额支付
							if ($("#cekbox").is(":checked")) {
								var balance = $("#balance").val();
								if (parseFloat(balance) < parseFloat(money)) {
									$("#but").attr('disabled',false);
									alert("余额不足请充值");
									return false;
								}
								
								var verifyCode = $("#verifyCode").val();
								if (verifyCode.length == 0) {
									$("#but").attr('disabled',false);
									alert("请输入验证码！");
									return false;
								}
								
								// 异步验证前，将提交按钮置灰
								$("#but").attr('disabled',true);
								
								// 检查验证码
								$.ajax({
									url : "member!verifyForConsumeByBalance",
									type : "post",
									data : {
										"memberMobile" : $("#memberMobile").val(),
										"verifyCodeForConsume" : verifyCode
									},
									datatype : "json",
									success : function(data) {
										var d = $.parseJSON(data);;
										var b = d.message;
										if(b != 'ok') {
											$("#but").attr('disabled',false);
											alert(b);
										}else {
											shopping.submit();
										}
									},
									error : function(request) {
										$("#but").attr('disabled',false);
										alert("Connection error");
									}
								});
							}else {
								// 是否是杭州晓荷的操作员提交
								if (xiaoheFlag) { // 是的
									var smallBanks = $("input[name='consume.smallBanks']").val();
									if (smallBanks.length == 0) {
										$("#but").attr('disabled',false);
										alert("请填写小票号");
										return false;
									}
									
									var smallBanksExg = /^[A-Za-z0-9]{6,10}$/;
									if (!smallBanksExg.test(smallBanks)) {
										$("#but").attr('disabled',false);
										alert("小票号格式不正确！");
										return false;
									}
									
									// 验证小票号是否已录入
									$.ajax({
										url : "logconsumeexamineaction!verifySmallBanks",
										type : "post",
										data : {
											"consume.smallBanks" : smallBanks
										},
										datatype : "json",
										success : function(data) {
											var d = $.parseJSON(data);
											var b = d.message;
											if(b == 'ok') {
												var url = "logconsumeexamineaction!shopping";
												url += "?member.id=" + $("input[name='member.id']").val();
												url += "&member.mobile=" + $("input[name='member.mobile']").val();
												url += "&baseMember.id=" + $("input[name='baseMember.id']").val();
												url += "&baseMember.score=" + $("input[name='baseMember.score']").val();
												url += "&shop.id=" + $("input[name='shop.id']").val();
												url += "&money=" + $("input[name='money']").val();
												url += "&consume.smallBanks=" + smallBanks;
												window.location.href = url;
											}else {
												alert(b); 
											}
											$("#but").attr('disabled',false);
										},
										error : function(request) {
											$("#but").attr('disabled',false);
											alert("连接服务器异常！");
										}
									});
									
								} else { // 不是
									shopping.submit();
								}
							}
						}
					},
					error : function(request) {
						$("#but").attr('disabled',false);
						alert("Connection error");
					}
				});
				
			});
			
			// 选择余额支付
			$("#cekbox").click(function() {
				if ($("#cekbox").is(":checked")) {
					$(".verify-code").show();
				}else {
					$(".verify-code").hide();
				}
			});
			
			// 余额支付
			// 发送验证码
			$("#sendBtn").click(function() {
				$("#but").attr('disabled',true);
				$("#sendBtn").removeClass("btn-success").addClass("btn-danger");
				$("#sendBtn").attr('disabled',true);
				var time = 60;
				var w = setInterval(function() {
					$("#sendBtn").text(time + "发送验证码 ");
					time--;
					if (time == 0) {
						clearInterval(w);
						$("#sendBtn").removeClass("btn-danger").addClass("btn-success");
						$("#sendBtn").text("发送验证码");
						$("#sendBtn").attr('disabled',false);
					}
				},1000);
				
				$.ajax({
					url : "member!sendSmsForConsumeByBalance",
					type : "post",
					data : {
						"memberMobile" : $("#memberMobile").val()
					},
					datatype : "json",
					success : function(data) {
						var d = $.parseJSON(data);;
						var b = d.message;
						
						if(b == 'ok') {
							alert("验证码发送成功");
						}else {
							alert(b); 
						}
						$("#but").attr('disabled',false);
					},
					error : function(request) {
						$("#but").attr('disabled',false);
						alert("Connection error");
					}
				});
			});
					
		});
	</script>
</body>
</html>